<template>
  <div class="Index">
    <CommonFormCreate ref="form" v-model="form" :options="options" />
    <div class="btn" hover-class="hover" hover-start-time="0" hover-stay-time="0" @click="handleAdd">添加</div>
  </div>
</template>

<script>
import CommonFormCreate from '@/components/CommonFormCreate'
import TYPE from '@/components/CommonFormCreateType'
import api from '@/api'

export default {
  components: {
    CommonFormCreate,
  },
  data () {
    return {
      form: {
        title: '',
        startTime: '',
        endTime: '',
        address: '',
        content: '',
      },
      options: [
        {
          type: TYPE.INPUT,
          title: '日程标题',
          field: 'title',
          placeholder: '请输入日程标题',
          rules: { required: true, message: '请输入日程标题', trigger: 'blur' },
          required: true,
        },
        {
          type: TYPE.DATE_SELECT,
          title: '开始时间',
          field: 'startTime',
          placeholder: '请选择开始时间',
          rules: { required: true, message: '请选择开始时间', trigger: 'blur' },
          required: true,
        },
        {
          type: TYPE.DATE_SELECT,
          title: '结束时间',
          field: 'endTime',
          placeholder: '请选择结束时间',
          rules: { required: true, message: '请选择结束时间', trigger: 'blur' },
          required: true,
        },
        {
          type: TYPE.INPUT,
          title: '地点',
          field: 'address',
          placeholder: '请输入地点',
          rules: { required: true, message: '请输入地点', trigger: 'blur' },
          required: true,
        },
        {
          type: TYPE.TEXTAREA,
          title: '日程描述',
          field: 'content',
          placeholder: '请输入日程描述',
        },

      ],
    }
  },
  watch: {
    form: {
      deep: true,
      handler () {
        console.log('form', this.form)
      },
    },
  },
  methods: {
    async handleAdd () {
      await this.$refs.form.$validate()
      await api.addTodo(this.dealForm(this.form))
      uni.showModal({
        title: '成功',
        content: '添加成功',
        showCancel: false,
      })
      uni.navigateBack()
    },
    dealForm (form) {
      const result = { ...form }
      result.startTime && (result.startTime = new Date(result.startTime).getTime())
      result.endTime && (result.endTime = new Date(result.endTime).getTime())
      return result
    },
  },
}
</script>

<style lang="scss" scoped> @import "~css/var.scss";

.Index {
	overflow: hidden;
	min-height: 100vh;
	padding: 0 15px;
	background: #fff;

	.btn {
		margin: 25px 0;
		border-radius: 5px;
		line-height: 46px;
		text-align: center;
		font-weight: 500;
		font-size: $fz-xl;
		color: #fff;
		background: #d1272f;

		&.hover {
			opacity: .8;
		}
	}
}

</style>
